<template>
  <div class="report">
    <nut-form ref="ruleForm" :model-value="form" :rules="rules">
      <nut-form-item label="申请日期" prop="applicationDate" custom-class="li-cell-box">
        <nut-input v-model="form.applicationDate" class="nut-input-text" placeholder="请输入申请日期" type="text" disabled
          input-align="right" />
      </nut-form-item>
      <nut-form-item label="商户" prop="mchtNo" required custom-class="li-cell-box">
        <option-select v-model="form.mchtNo" title="商户" :options="mchtOptions" inputAlign="right" disabled />
      </nut-form-item>
      <nut-form-item label="门店" prop="shopId" custom-class="li-cell-box">
        <option-select v-model="form.shopId" title="门店" :options="shopOptions" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="设备类型" prop="deviceType" required custom-class="li-cell-box">
        <option-select v-model="form.deviceType" title="设备类型" :options="typeOptions" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="设备SN号" prop="deviceSN" required custom-class="li-cell-box">
        <option-select v-model="form.deviceSN" title="设备SN号" :options="snOptions" @clickInput="getSNList"
          inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="遗失原因" prop="faultDescription" required custom-class="li-cell-box">
        <nut-textarea v-model="form.faultDescription" class="nut-input-text" placeholder="请输入遗失原因" type="text" autosize
          text-align="right" />
      </nut-form-item>
    </nut-form>
    <div class="actions">
      <div class="li-btn-tj shake_o" @click="submit">提交</div>
      <!-- <nut-button type="primary" block @click="submit">提交</nut-button> -->
    </div>
  </div>
</template>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "遗失申请",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<script setup lang="ts">
import mcht from '@/api/mcht'
import { useHomeStore } from '@/store'
import dayjs from 'dayjs'

interface Option {
  text: string
  value: string
}

const { mchtNo } = storeToRefs(useHomeStore())

const ruleForm = ref()
const form = reactive({
  applicationDate: dayjs().format('YYYY-MM-DD'),
  mchtNo: '',
  mchtName: '',
  shopId: '',
  deviceType: '1',
  deviceSN: '',
  faultDescription: ''
})

const rules = {
  deviceSN: [
    { required: true, message: '请选择设备SN号' },
  ],
  faultDescription: [
    { required: true, message: '请输入遗失原因' },
  ]
}

const typeOptions: Option[]  = [
  { text: '智能POS', value: '1' },
  { text: '二维码支付终端', value: '6' }
]

const mchtList = ref([])
const mchtOptions = ref<Option[]>([])
const shopOptions = ref<Option[]>([])
async function getStoreList () {
  const { data } = await mcht.getMchtStoreList()
  if (data.status === 'success') {
    mchtList.value = data?.data.mchtList
    mchtOptions.value = mchtList.value.map(mcht => {
      return {
        text: mcht.mchtNm,
        value: mcht.mchtNo,
      }
    })
    // 赋值以触发watch
    form.mchtNo = mchtNo.value
  }
}

const snOptions = ref<Option[]>([])
async function getSNList () {
  const { data } = await mcht.getSNList({
    mchtNo: form.mchtNo,
    shopId: form.shopId,
    deviceType: form.deviceType
  })
  if (data.status === 'success') {
    snOptions.value = data.data.deviceList.map(device => {
      return {
        text: device.deviceSn,
        value: device.deviceSn
      }
    })
    if (snOptions.value.length > 0) {
      form.deviceSN = snOptions.value[0].value
    } else {
      form.deviceSN = ''
    }
  }
}

async function submit () {
  ruleForm.value.validate().then(async ({valid}: { valid: boolean }) => {
    if (valid) {
      const { data } = await mcht.submitLossReport(form)
      if (data.status === 'success') {
        uni.showToast({
          icon: 'success',
          title: data.message,
          duration: 3000
        })
        form.shopId = ''
        form.deviceType = '1'
        form.deviceSN = ''
        form.faultDescription = ''
      }
    }
  })
}

// 切换商户
watch(() => form.mchtNo, async () => {
  // 清空
  form.shopId = ''
  form.deviceType = '1'
  form.deviceSN = ''
  form.mchtName = mchtOptions.value.find(x => x.value === form.mchtNo).text
  shopOptions.value = mchtList.value.find(x => x.mchtNo === form.mchtNo).shops.map(shop => {
    return {
      text: shop.shopNm,
      value: shop.shopId,
    }
  })
  // await getSNList()
})

// 切换门店
watch(() => form.shopId, async () => {
  form.deviceType = '1'
  form.deviceSN = ''
  // await getSNList()
})

// 切换设备类型
watch(() => form.deviceType, async () => {
  form.deviceSN = ''
  // await getSNList()
})

onMounted(async () => {
  await getStoreList()
})
</script>

<style lang="sass" scoped>
.report
  .actions
    padding: 20px
:deep(.nut-textarea__textarea)
  text-align: right!important
</style>